<template>
    <div class="dialog">
        <a-modal
            class="completeUnitDialog"
            title="申报单位"
            :visible="visible"
            @cancel="handleCancel"
            :maskClosable="false"
        >
            <template slot="footer">
                <a-button style="margin-top:0;" :disabled="is_modify=='Y'?false:true" type="primary" html-type="submit" @click="onSubmit">
                    保存
                </a-button>
            </template>
            <div class="dialogCont">
                <a-form-model
                    class="completeUnitDialogModel"
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="{ span: 4 }"
                    :wrapper-col="wrapperCol"
                >
                    <a-form-model-item ref="companyName" label="单位名称：" prop="companyName">
                        <a-input v-model="form.companyName"/>
                    </a-form-model-item>
                    <a-row :gutter="24">              
                        <a-col :span="12" >                       
                            <a-form-model-item  label="省份："  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" prop="province">                       
                                <a-select v-model="form.province" @change="handleProvinceChange">
                                    <a-select-option v-for="province in provinceData" :key="province.XZDQ_DM">
                                        {{ province.XZDQ_MC }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>               
                        </a-col>              
                        <a-col :span="12">                    
                            <a-form-model-item label="地市：" :label-col="{ span: 8 }"  :wrapper-col="{ span: 16 }" prop="city">                       
                                <a-select v-model="form.city">
                                    <a-select-option v-for="city in cityData" :key="city.XZDQ_DM">
                                        {{ city.XZDQ_MC }}
                                    </a-select-option>
                                </a-select>               
                            </a-form-model-item>               
                        </a-col>            
                    </a-row>
                    <a-form-model-item ref="address" label="通讯地址：" prop="address">
                        <a-input v-model="form.address"/>
                    </a-form-model-item>
                    <a-form-model-item ref="postcode" label="邮编：" prop="postcode">
                        <a-input v-model="form.postcode"/>
                    </a-form-model-item>
                    <a-form-model-item ref="group" label="所属集团：" prop="group">
                        <a-select v-model="form.group" @change="changeGroup">
                            <a-select-option v-for="group in groupData" :key="group.id">
                                {{group.jttjdwMc}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item 
                        ref="recommender" 
                        label="推荐单位：" 
                        prop="recommender"
                        :rules="{ required: isRequired, message: '请选择推荐单位类别', trigger: 'change' }"
                    >
                        <a-select :disabled="isDisabled" @change="handleRecommender" v-model="form.recommender">
                            <a-select-option v-for="recommender in recommenderData" :key="recommender.jttjdw_lbbh">
                                {{recommender.jttjdw_lbmc}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item
                        class="recommenderName" 
                        ref="recommenderName" 
                        label="" 
                        prop="recommenderName" 
                        :colon="false"
                        :rules="{ required: isRequired, message: '请选择推荐单位', trigger: 'change' }"
                    >
                        <a-select v-if="jttjdwBh==999" :disabled="isDisabled" v-model="form.recommenderName">
                            <a-select-option v-for="recommenderType in recommenderTypeData" :key="recommenderType.id">
                                {{recommenderType.jttjdw_mc}}
                            </a-select-option>
                        </a-select>
                        <a-select v-else v-model="form.recommenderName" :disabled="isDisabled">
                            <a-select-option v-for="group in groupData" :key="group.id">
                                {{group.jttjdwMc}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>

</template>
<script>
import {
    cxjsbSfList,
    cxjsbListDsBySf,
    cxjsbSsjtlist,
    cxjsbTjdwlbList,
    cxjsbTjdwlistBylb,
    cxjsbGetSbtjdw
} from '@/api/shenbao';
export default {
    props: {
        flag: null,
        // type: null,
        id: null,
        obj: null,
        is_modify: null
    },
    watch: {
        flag(next, prev) {
            if (next != prev) {
                var self = this;
                self.visible = !self.visible;
                if (self.obj == 'edit') {
                    self.getDetail();
                }
                self.getCxjsbSfList();
                self.getCxjsbSsjtlist();
                self.getCxjsbTjdwlbList();
            }
        }
    },
    data() {
        return {
            isDisabled: false,
            isRequired: true,
            jttjdwBh: "",
            provinceData: [],
            cityData: [],
            groupData: [],
            recommenderData: [],
            recommenderTypeData: [],
            detailInfo: {},
            visible: false,
            wrapperCol: { span: 20 },
            form: {
                // 单位名称
                companyName: "",
                // 省份
                province: "",
                // 地市
                city: "",
                // 通讯地址
                address: '',
                // 邮编
                postcode: '',
                // 所属集团
                group: '',
                // 推荐单位
                recommender: '',
                // 推荐单位名称
                recommenderName: ''
            },
            rules: {
                companyName: [
                    { required: true, message: '请填写单位姓名', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请填写通讯地址', trigger: 'blur' }
                ],
                postcode: [
                    { required: true, message: '请填写邮编', trigger: 'blur' }
                ],
                group: [
                    { required: true, message: '请填写所属集团', trigger: 'blur' }
                ],
                province: [
                    { required: true, message: '请选择省份', trigger: 'change' }
                ],
                city: [
                    { required: true, message: '请选择地市', trigger: 'change' }
                ],
                // recommender: [
                //     { required: true, message: '请选择推荐单位', trigger: 'change' }
                // ],
                // recommenderName: [
                //     { required: true, message: '请选择推荐单位名称', trigger: 'change' }
                // ]
            }
        }
    },
    methods: {
        onSubmit() {
            let that = this;
            that.$refs.ruleForm.validate((valid, value) => {
                if (valid) {
                    let formData = new FormData();
                    // 成果id
                    formData.append('cxj_cxj_id', that.$route.query.cxj_cxj_id);
                    // 所属集团
                    formData.append('ssjt', that.form.group);
                    // 申报单位id -- 修改时会用到
                    formData.append('sbdw_id', '');
                    // 推荐单位
                    formData.append('tjdw', that.form.recommenderName);
                    // 地市
                    formData.append('sbdw_ds', that.form.city)
                    // 单位名称
                    formData.append('sbdw_qymc', that.form.companyName)
                    // 省份
                    formData.append('sbdw_sf', that.form.province)
                    // 通讯地址
                    formData.append('sbdw_txdz', that.form.address)
                    // 邮编
                    formData.append('sbdw_yb', that.form.postcode);
                    if (that.id) {
                        // 申报单位id -- 修改时会用到
                        formData.append('sbdw_id', that.id);
                    } else {
                        // 申报单位id -- 新增时会用到
                        formData.append('sbdw_id', '');
                    }
                    that.$emit('saveUnit', formData)
                } else {
                    return false;
                }
            });
        },
        getDetail(){
            let self = this;
            cxjsbGetSbtjdw({
                cxj_cxj_id: self.$route.query.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    self.detailInfo = data.result;
                    self.jttjdwBh = data.result.ssjtbh;
                    cxjsbListDsBySf({
                        xzdq_dm: self.detailInfo.sbdw_sf
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.cityData = data.result;
                        }
                    })
                    cxjsbTjdwlistBylb({
                        jttjdw_lb: self.detailInfo.jttjdw_lbbh
                    }).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.recommenderTypeData = data.result;
                        }
                    })
                    self.form.address = self.detailInfo.sbdw_txdz;
                    self.form.postcode = self.detailInfo.sbdw_yb;
                    self.form.province = self.detailInfo.sbdw_sf;
                    self.form.city = self.detailInfo.sbdw_ds;
                    self.form.group = self.detailInfo.sys_cxj_jttjdw_id;
                    self.form.companyName = self.detailInfo.sbdw_qymc;
                    self.form.recommender = self.detailInfo.jttjdw_lbbh;
                    self.form.recommenderName = self.detailInfo.tjdwid;
                    self.handleRecommender(self.detailInfo.jttjdw_lbbh);
                        if (self.detailInfo.ssjtbh == "999") {
                            self.isRequired = true;
                            self.isDisabled = false;
                            self.form.recommender = self.detailInfo.jttjdw_lbbh;
                            self.form.recommenderName = self.detailInfo.tjdwid;
                        } else {
                            self.isRequired = false;
                            self.isDisabled = true;
                            self.form.recommender = "";
                            self.form.recommenderName = self.detailInfo.sys_cxj_jttjdw_id;
                        }
                }
            })
        },
        handleProvinceChange(value) {
            this.cityData = [];
            this.form.city = "";
            cxjsbListDsBySf({
                xzdq_dm: value
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.cityData = data.result;
                }
            })
        },
        handleCancel(e) {
            this.$refs.ruleForm.resetFields();
            this.isDisabled = false;
            this.isRequired = true;
            this.visible = false;
        },
        // 获取省份
        getCxjsbSfList(){
            cxjsbSfList().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.provinceData = data.result;
                }
            })
        },
        // 所属集团
        getCxjsbSsjtlist(){
            cxjsbSsjtlist().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.groupData = data.result;
                    
                }
            })
        },
        changeGroup(value){
            this.form.recommender = "";
            this.form.recommenderName = "";
            this.groupData.map(item=>{
                if (item.id == value) {
                    if (item.jttjdwBh == '999') {
                        this.jttjdwBh = item.jttjdwBh;
                        this.isRequired = true;
                        this.isDisabled = false;
                        this.form.recommenderName = "";
                        this.getCxjsbTjdwlbList();
                    } else {
                        this.jttjdwBh = '';
                        this.isRequired = false;
                        this.isDisabled = true;
                        this.form.recommenderName = value;
                    }
                }
            })
        },
        // 获取推荐单位列表
        getCxjsbTjdwlbList(){
            cxjsbTjdwlbList().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.recommenderData = data.result;
                }
            })
        },
        handleRecommender(value){
            this.form.recommenderName = "";
            cxjsbTjdwlistBylb({
                jttjdw_lb: value
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.recommenderTypeData = data.result;
                }
            })
        }
    }
}
</script>
<style lang="less">
.completeUnitDialog {
    .ant-modal-content {
        width: 500px!important;
        .recommenderName {
            .ant-form-item-control-wrapper {
                margin-left: 16.66666667%;
            }
        }
    }
}

.completeUnitDialogModel {
    .ant-form-item {
        display: flex;
    }
}
</style>
<style lang="less" scoped>
    
    .tableForm {
        margin-top: 11px;
    }
</style>
